<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div>
      <input type="text" id="input" value="" />
      <span id="span"> hello world</span>
    </div>

    <script>
      let input = document.getElementById('input')
      let span = document.getElementById('span')
      // input.addEventListener('input', function () {
      //   span.innerHTML = input.value
      // })

      // 数据劫持
      let obj = {}
      Object.defineProperty(obj, 'text', {
        get () {
          console.log('数据获取')
  
        },
        set (value) {
          console.log('数据更新'+value);
          span.innerHTML = value
        }
      })

      input.addEventListener('keyup', function (e) {
        obj.text = input.value
      })

      // obj.text = 1
      // obj.name = 'text'
    </script>
  </body>
</html>
